import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {PageContainer, ProTable,} from '@ant-design/pro-components';
import React, {useRef} from 'react';
import {list} from "./service";
import {getType} from "./utils";
import {Tag} from "antd";

export default () => {
  const actionRef = useRef<ActionType | null>(null);
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: '序号',
      dataIndex: 'order',
      width:50,
    },
    {
      title: '用户',
      dataIndex: 'name',
    },
    {
      title: '金额',
      dataIndex: 'money',
      valueType: 'money',
      width:50,
    },
    {
      title: '抢包时间',
      dataIndex: 'time',
      width:80,
    },
    {
      title: '延迟时间（毫秒）',
      dataIndex: 'openTime',
      width:122,
    },
    {
      title: '批次号1',
      dataIndex: 'batchId',
      width:140,
    },
    {
      title: '批次号2',
      dataIndex: 'sn',
    },
    {
      title: '类型',
      dataIndex: 'type',
      width:50,
      renderText:(_,record)=>{
        const type = getType(record.money);
        return type==0?<Tag color="#f50">偶</Tag>:<Tag color="#87d068">奇</Tag>
      }
    },
  ];

  return (
    <PageContainer title={false}>
      <ProTable
        actionRef={actionRef}
        headerTitle='数据列表'
        options={false}
        rowKey="id"
        bordered
        size='small'
        search={false}
        request={list}
        columns={columns}
      />
    </PageContainer>
  );
};
